<template>
  <div style="width: 750px;">
    <div class="title">商品评价</div>
    <div v-show="data.length > 0">
      <comment
        v-for="(item, index) in data"
        :key="index"
        :avatar="item.avatar"
        :name="item.name"
        :starLevel="item.starLevel"
        :content="item.content"
        :date="item.date"
      ></comment>
      <el-pagination
        style="display: flex; justify-content: right; --el-color-primary: #3271ae"
        background
        layout="prev, pager, next"
        :total="total"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
        @current-change="handleCurrentChange"
      />
    </div>

    <div
      v-show="data.length == 0"
      style="text-align: center; color: #999999; padding-top: 20px;"
    >
      [暂无评价]
    </div>
  </div>
</template>

<script>
import CommentVue from "./Comment.vue";
import { commentAll } from "@/api/comment";

export default {
  components: {
    Comment: CommentVue,
  },
  props: {
    commodityId: Number,
  },
  data() {
    return {
      page: 0,
      pageSize: 10,
      data: [],
      total: 0,
    };
  },
  methods: {
    doCommentAll() {
      commentAll(this.page, this.pageSize, this.commodityId).then((res) => {
        this.data = res.list;
        this.total = res.total;
      });
    },
    handlePrevClick(value) {
      this.page = (value - 1) * this.pageSize
      this.doCommentAll()
    },
    handleNextClick(value) {
      this.page = (value - 1) * this.pageSize
      this.doCommentAll()
    },
    handleCurrentChange(value) {
      this.page = (value - 1) * this.pageSize
      this.doCommentAll()
    }
  },
  created() {
    this.doCommentAll();
  },
};
</script>

<style scoped>
.title {
  height: 30px;
  background-color: #f7f7f7;
  line-height: 30px;
  padding: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #66666b;
}
</style>